<template>
	<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" label-width="auto"
		class="demo-ruleForm" :size="formSize" status-icon>
		<el-form-item label="工序名" prop="ProcedureName">
			<el-input v-model="ruleForm.ProcedureName" />
		</el-form-item>
		<el-form-item label="工序描述" prop="ProcedureDesc">
			<el-input v-model="ruleForm.ProcedureDesc" autocomplete="off" />
		</el-form-item>
		<el-form-item label="ProcedureOrder" prop="ProcedureOrder">
			<el-input v-model="ruleForm.ProcedureOrder"  autocomplete="off" />
		</el-form-item>
		<el-form-item label="业务名" prop="BusinessId">
			<el-select v-model="ruleForm.BusinessId" placeholder="请选择业务" :options="optionsDect">
				<el-option v-for=" item in optionsDect" :key="item.Id" :label="item.BusinessName"
                    :value="parseInt(item.Id)">
                </el-option>
			</el-select>
		</el-form-item>

		<el-form-item>
			<el-button type="primary" @click="submitForm(ruleFormRef)">
				保存
			</el-button>
			<el-button @click="resetForm(ruleFormRef)">重置</el-button>
		</el-form-item>
	</el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElNotification } from 'element-plus'
import procedureinfoapi from "../../api/procedureinfoapi"

const emit = defineEmits(['onSave'])

interface RuleForm {
	ProcedureOrder: number
	ProcedureName: string
	ProcedureDesc: string
	BusinessId:number|null
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
	ProcedureOrder: 1,
	ProcedureName: '',
	ProcedureDesc: '',
	BusinessId:null
})


const optionsDect = ref<any>([
])
procedureinfoapi.BusGet().then((res:any) => {
	console.log("res", res.data)
	optionsDect.value = res.data
})

const submitForm = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate((valid, fields) => {
		if (valid) {
			procedureinfoapi.post(ruleForm).then((res:any) => {
				if (res.code == 1) {
					ElNotification({
						title: 'Success',
						message: '添加成功',
						type: 'success',
						duration: 800,
						onClose: () => {
							emit("onSave", true)
						}
					})
				} else {
					ElNotification({
						title: 'Error',
						message: '失败',
						type: 'error',
						duration: 800,
					})
				}
			}).catch((err:any) => {
				ElNotification({
					title: 'Error',
					message: '失败',
					type: 'error',
					duration: 800,
				})
			})
		} else {
			console.log('error submit!', fields)
		}
	})
}

const resetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.resetFields()
}
</script>